<template>
	<view>
		<cmd-nav-bar back title="重置密码"></cmd-nav-bar>
		<cmd-page-body type="top">
			<cmd-transition name="fade-up">
				<form @submit="formSubmit">
					<view class="modify">
<!--						<view class="modify-password">-->
<!--							<cmd-input v-model="dataForm.name" type="number" displayable maxlength="26" placeholder="姓名"></cmd-input>-->
<!--						</view>-->
						<view class="modify-password">
							<cmd-input v-model="dataForm.password" type="password" displayable maxlength="26" placeholder="请输入新密码"></cmd-input>
						</view>
						<view class="tui-btn-box">
							<button class="btn-primary" formType="submit" hover-class="btn-hover" type="primary">提交</button>
						</view>
					</view>
				</form>
			</cmd-transition>
		</cmd-page-body>
		<!--		<form @submit="formPassword" :rules="dataRule">-->
		<!--			<view class="tui-login-from">-->
		<!--				<view class="self-direction-row">-->
		<!--					<view class="basis-df radius text-xl">id：{{dataUser.id}}</view>-->
		<!--				</view>-->
		<!--				<view class="tui-line-cell">-->
		<!--				<tui-icon color='#5677fc' name="password" size="20"></tui-icon>-->
		<!--				<input class="tui-input" maxlength="11" name='dataUser.password' placeholder="请输入旧密码" placeholder-class="phcolor"-->
		<!--					   type="number"-->
		<!--					   v-model="loginMessage.password"/>-->
		<!--			</view>-->
		<!--				<view class="tui-line-cell">-->
		<!--					<tui-icon color='#5677fc' name="password" size="20"></tui-icon>-->
		<!--					<input class="tui-input" maxlength="11" name='dataUser.newpassword1' placeholder="请输入新密码" placeholder-class="phcolor"-->
		<!--						   type="password"-->
		<!--						   v-model="loginMessage.password"/>-->
		<!--				</view>-->
		<!--				<view class="tui-line-cell">-->
		<!--					<tui-icon color='#5677fc' name="password" size="20"></tui-icon>-->
		<!--					<input class="tui-input" maxlength="11" name='dataUser.newpassword2' placeholder="请再输入新密码" placeholder-class="phcolor"-->
		<!--						   type="password"-->
		<!--						   v-model="loginMessage.password"/>-->
		<!--				</view>-->
		<!--				<button class="btn-primary tui-btn-submit" form-type="submit" hover-class="btn-hover">确认修改</button>-->
		<!--			</view>-->
		<!--		</form>-->
	</view>
</template>

<script>
	import cmdNavBar from "@/components/cmd-nav-bar/cmd-nav-bar.vue"
	import cmdPageBody from "@/components/cmd-page-body/cmd-page-body.vue"
	import cmdTransition from "@/components/cmd-transition/cmd-transition.vue"
	import cmdInput from "@/components/cmd-input/cmd-input.vue"
	import { forgetPwd } from '@/api/user/index'
	import { findUserById } from '@/api/user/index'
	import {mapActions} from 'vuex'

	export default {
		components: {
			cmdNavBar,
			cmdPageBody,
			cmdTransition,
			cmdInput
		},

		data() {
			var validateConfirmPassword = (rule, value, callback) => {
				if (this.dataUser.newpassword1 !== value) {
					callback(new Error('确认密码与新密码不一致'))
				} else {
					callback()
				}
			}
			return {
				dataUser: {
					id: '',
					loginName: '',
					email: '',
					photo: '',
					phone: '',
					sex: '',
					college: '',
					password: ''
				},
				dataForm:{
					name: '',
					password: '',
				},
				passwordReg: /^\w+$/,

				modifyMobile: false,
				dataRule: {
					password: [
						{required: true, message: '原密码不能为空', trigger: 'blur'}
					],
					newpassword1: [
						{required: true, message: '新密码不能为空', trigger: 'blur'}
					],
					newpassword2: [
						{required: true, message: '确认密码不能为空', trigger: 'blur'},
						{validator: validateConfirmPassword, trigger: 'blur'}
					]
				}
			};
		},

		// watch: {
		// 	/**
		// 	 * 监听表单数值
		// 	 */
		// 	mobile: {
		// 		handler(newValue) {
		// 			if (newValue.passwordOne.length >= 8 && newValue.passwordOne == newValue.passwordTwo) {
		// 				this.modifyMobile = true;
		// 			} else {
		// 				this.modifyMobile = false;
		// 			}
		// 		},
		// 		deep: true
		// 	}
		// },
		onLoad(option) {
			this.init()
		},
		methods: {
			...mapActions(['updatePassword']),
			init() {
				findUserById().then(res => {
					this.dataUser = res.data
					console.log("dataUser",this.dataUser)
				})
			},

			/**
			 * 提交按钮点击执行
			 */
			formSubmit(e) {
				forgetPwd().then(res => {
					this.dataForm = res.data
					// this.dataForm.name = res.data.name
					this.dataForm.password = res.data.password
					console.log('dataForm', this.dataForm)
				})
				uni.showToast({
					title: '修改成功'
				})
			}
		},

		beforeDestroy() {
			/**
			 * 关闭页面清除轮询器
			 */
			clearInterval(this.safety.interval);
		}
	}
</script>

<style>
	.modify {
		margin-top: 118upx;
		margin-right: 72upx;
		margin-left: 72upx;
	}

	.modify-phone {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		border-bottom: 2upx #dedede solid;
		margin-top: 118upx;
		margin-bottom: 40upx;
	}

	.modify-phone-getcode {
		color: #3F51B5;
		text-align: center;
		min-width: 140upx;
	}

	.modify-password,
	.modify-code {
		margin-bottom: 40upx;
		border-bottom: 2upx #dedede solid;
	}

	.btn-modify {
		margin-top: 100upx;
		border-radius: 50upx;
		font-size: 16px;
		color: #fff;
		background: linear-gradient(to right, #88a1f9, #9ac6ff);
	}

	.btn-modify-active {
		background: linear-gradient(to right, #365fff, #36bbff);
	}

	.btn-modify-hover {
		background: linear-gradient(to right, #365fdd, #36bbfa);
	}

	button[disabled] {
		color: #fff;
	}
</style>
